import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { Stat,Frame,G2 } from 'g2';
import createG2 from 'g2-react';
var _state,_props,_this;
const Chart = createG2(chart => {
      chart.coord('theta');
      chart.legend('name', {
        position: 'bottom',
        itemWrap: true,
        formatter: function(val) {
          for(var i = 0, len = _props.uData.length; i < len; i++) {
            var obj = _props.uData[i];
            if (obj.name === val) {
              return val + ': ' + obj.value ; 
            }
          }
        }
      });
      chart.axis(false);
      chart.intervalStack().position(Stat.summary.percent('value'))
        .color('name', ['#edcd10', '#53b481', '#3db1fa', '#f828aa', '#461012'])
        .style({
          stroke: '#fff',
          lineWidth: 2
        });
      chart.render();
    });

class topologymapModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      forceFit: true,
      height: 320,
      plotCfg: {
        margin: [30, 30, 90, 30],
      }
    }
  }
  componentDidMount() {
   
  }
  render() {
    _this = this;
    _props = _this.props;
    _state = _this.state;
    return (
      <div style={{}}>         
         {_props.uData.length?(
            <Chart
            data={_props.uData}
            width={this.state.width}
            height={this.state.height}
            plotCfg={this.state.plotCfg}
            forceFit={this.state.forceFit} />
          ):""}
      </div>
    );
  }
}

module.exports = topologymapModal
